SVG Styling এর জন্য CSS Variables গাইড ও নোট

CSS Variables (বা Custom Properties) হল একটি শক্তিশালী ফিচার যা CSS এ মানের পুনঃব্যবহারযোগ্যতা এবং কাস্টমাইজেশন সহজ করে। CSS Variables ব্যবহার করে আপনি এসভিজি (SVG) উপাদানগুলির স্টাইলিংকে আরও ফ্লেক্সিবল এবং ডায়নামিক করতে পারেন। এর মাধ্যমে আপনি একাধিক এসভিজি উপাদানে একই মান পুনরায় ব্যবহার করতে পারেন, এবং পরিবর্তন করলে সেগুলির সকল স্থানে পরিবর্তন হবে।

এসভিজি ফাইলের স্টাইলিং CSS Variables ব্যবহার করলে গ্রাফিক্সের রঙ, আকার, স্ট্রোক ইত্যাদি সহজে কাস্টমাইজ করা যায়, এবং এক জায়গায় মান পরিবর্তন করলে সমস্ত এসভিজি উপাদানে তা প্রতিফলিত হয়।

1. CSS Variables দিয়ে SVG Styling

এটি খুবই সহজ এবং কার্যকরী যে, আপনি CSS Variable গুলি ডিফাইন করে এসভিজি উপাদানগুলির মধ্যে প্রয়োগ করতে পারেন। এই কৌশলটি এসভিজি ফাইলের স্টাইল আরও সহজ, পুনঃব্যবহারযোগ্য এবং নিয়ন্ত্রণযোগ্য করে তোলে।

উদাহরণ: CSS Variables দিয়ে SVG রঙ পরিবর্তন

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" class="circle" />
</svg>

<style>
  :root {
    --circle-fill: red;
    --circle-stroke: black;
    --circle-stroke-width: 4;
  }

  .circle {
    fill: var(--circle-fill);
    stroke: var(--circle-stroke);
    stroke-width: var(--circle-stroke-width);
  }

  /* Changing the color dynamically */
  .circle:hover {
    --circle-fill: blue;
  }
</style>

ব্যাখ্যা:

• :root সিলেক্টরের মাধ্যমে CSS Variables ডিফাইন করা হয়েছে। এখানে --circle-fill, --circle-stroke, এবং --circle-stroke-width স্টাইল মান গুলি ডিফাইন করা হয়েছে।
• .circle ক্লাসের মাধ্যমে এসভিজি উপাদানটির স্টাইল কাস্টমাইজ করা হয়েছে, যেখানে var(--circle-fill), var(--circle-stroke), এবং var(--circle-stroke-width) ব্যবহার করা হয়েছে।
• হোভার ইফেক্ট ব্যবহার করে, রঙ পরিবর্তন করা হচ্ছে, যখন ইউজার বৃত্তটির উপর মাউস হোভার করবেন।

2. CSS Variables ব্যবহার করে Dynamic Color Change

CSS Variables ব্যবহার করে আপনি এসভিজি উপাদানের রঙ পরিবর্তন করতে পারেন যা ডাইনামিকভাবে ওয়েব পেজের স্টাইল পরিবর্তন করতে সহায়তা করে। এর মাধ্যমে আপনি একটি ফাইলের মধ্যে একাধিক স্থানে একসাথে পরিবর্তন করতে পারেন।

উদাহরণ: CSS Variables দিয়ে Dynamic SVG Color Change

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" class="circle" />
</svg>

<style>
  :root {
    --circle-fill: green;
    --circle-stroke: black;
    --circle-stroke-width: 3;
  }

  .circle {
    fill: var(--circle-fill);
    stroke: var(--circle-stroke);
    stroke-width: var(--circle-stroke-width);
    transition: fill 0.3s ease;
  }

  .circle:hover {
    --circle-fill: purple;
  }
</style>

ব্যাখ্যা:

• এখানে :root সিলেক্টরে --circle-fill কে green রঙ দেওয়া হয়েছে।
• যখন ব্যবহারকারী বৃত্তটির উপর মাউস হোভার করবেন, তখন --circle-fill পরিবর্তিত হয়ে purple রঙে পরিবর্তিত হবে।
• transition প্রপার্টি ব্যবহার করা হয়েছে, যাতে রঙ পরিবর্তন করার সময় এটি মসৃণভাবে ঘটে।

3. Multiple SVG Elements Styling with CSS Variables

একটি CSS Variable দিয়ে একাধিক এসভিজি উপাদান স্টাইল করা যেতে পারে, ফলে আপনার কোড আরো পুনঃব্যবহারযোগ্য ও সহজ হবে।

উদাহরণ: একাধিক এসভিজি উপাদানে CSS Variables ব্যবহার

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="shape" />
  <rect x="100" y="100" width="80" height="80" class="shape" />
</svg>

<style>
  :root {
    --shape-fill: orange;
    --shape-stroke: black;
    --shape-stroke-width: 5;
  }

  .shape {
    fill: var(--shape-fill);
    stroke: var(--shape-stroke);
    stroke-width: var(--shape-stroke-width);
  }

  /* Changing color dynamically */
  .shape:hover {
    --shape-fill: yellow;
  }
</style>

ব্যাখ্যা:

• একাধিক এসভিজি উপাদান (যেমন circle এবং rect) একই shape ক্লাস ব্যবহার করে একই CSS Variable দিয়ে স্টাইল করা হয়েছে।
• CSS Variables এর মাধ্যমে এক জায়গায় রঙ পরিবর্তন করলে, সব উপাদানগুলিতে তা প্রতিফলিত হবে।

4. SVG Animation with CSS Variables

CSS Variables ব্যবহার করে আপনি এসভিজি অ্যানিমেশনও পরিচালনা করতে পারেন। আপনি একটি CSS Variable এর মান পরিবর্তন করে অ্যানিমেশন চালাতে পারেন।

উদাহরণ: CSS Variables দিয়ে SVG Animation

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle id="animatedCircle" cx="100" cy="100" r="50" class="circle" />
</svg>

<style>
  :root {
    --circle-radius: 50;
    --circle-fill: blue;
  }

  .circle {
    fill: var(--circle-fill);
    transition: all 0.5s ease;
  }

  /* Animation on hover */
  #animatedCircle:hover {
    --circle-radius: 70;
    --circle-fill: red;
  }
</style>

ব্যাখ্যা:

• এখানে, --circle-radius এবং --circle-fill এর মাধ্যমে বৃত্তের রঙ এবং রেডিয়াস নিয়ন্ত্রণ করা হচ্ছে।
• যখন ইউজার বৃত্তটির উপর হোভার করবেন, তখন তার রঙ লাল হয়ে যাবে এবং আকার 70 এ পরিবর্তিত হবে।

5. Advantages of Using CSS Variables with SVG

1. Reusability: CSS Variables ব্যবহার করলে আপনি একই মান বার বার ব্যবহার করতে পারবেন, যা কোডকে আরও ক্লিন এবং পুনঃব্যবহারযোগ্য করে তোলে।
2. Dynamic Changes: CSS Variables এর মাধ্যমে আপনি ওয়েব পেজে ডায়নামিক স্টাইল চেঞ্জ করতে পারেন, যেমন হোভার বা ক্লিক ইভেন্টে রঙ বা আকার পরিবর্তন।
3. Maintainability: এক জায়গায় পরিবর্তন করলে সমস্ত এসভিজি উপাদানে তা প্রতিফলিত হয়, ফলে আপনার কোড মেইনটেন করা সহজ হয়ে ওঠে।

সারাংশ

CSS Variables ব্যবহার করে এসভিজি উপাদানগুলির স্টাইলিং আরও সহজ, ডায়নামিক এবং কাস্টমাইজযোগ্য করা সম্ভব। এটি কোডের পুনঃব্যবহারযোগ্যতা বাড়ায়, ইন্টারঅ্যাকটিভ স্টাইলিং সহজ করে এবং অ্যানিমেশন ব্যবস্থাপনাকে আরও কার্যকরী করে তোলে। CSS Variables এবং এসভিজি একসাথে ব্যবহার করলে ওয়েব ডিজাইনে একটি শক্তিশালী এবং কার্যকরী টুল তৈরি হয়, যা ওয়েব পেজের পারফরম্যান্স ও ইউজার এক্সপিরিয়েন্সে ভালো প্রভাব ফেলতে পারে।